<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>self_define</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" href="css/style.css">
<style>
	.header_lar{ font-size: 14px !important; }
	.header_main{  background: #594F3F;}
	.header_main *{ color: #ffffff !important;}
	#btn_sure{ padding: 2vw 17vw; font-size: 18px; position: absolute; top: 80vh; z-index: 10; margin: auto; left: 21.5vw;}
	.mui-navigate-right:after, .mui-push-right:after{ right: 0;}
	.mui-table-view-cell{ padding: 0;}
	.mui-table-view-cell a.mui-navigate-right{ margin: 0; margin-left: 6vw; height: 17.5vw; line-height: 17.5vw;}
	.mui-navigate-right strong{ font-weight: normal; font-size: 4.5vw;}
	.mui-navigate-right span{ padding-left: 5vw; font-size: 4vw; color: #D1D1D1;}
	
	

</style>
<script src="js/mui.min.js"></script>
<script src="js/jquery.js"></script>
</head>
<body>
	<!-- 侧滑导航根容器 -->
	<div class="mui-off-canvas-wrap mui-draggable">
	  <!-- 菜单容器 -->
	  <aside id="offCanvasSide" class="mui-off-canvas-left side_nav"  style="width: 47vw;">
	    <div class="mui-scroll-wrapper">
	      <div class="mui-scroll">
	        <div class="head_img">
	        	<img src="" alt="" />
	        </div>
	        <div class="user_name">活动</div>
	        <ul class="nav_main">
	        	<li class="active"><a href="self_define.html"><i class="iconfont" href="">&#xe612;</i>我要参加</a></li>
	        	<li><a href="actf_home.html"><i class="iconfont">&#xe611;</i>活动档案</a></li>
	        	<li><a href="square_home.html"><i class="iconfont">&#xe614;</i>广场</a></li>
	        	<li><a href="user.html"><i class="iconfont">&#xe613;</i>我的主页</a></li>
	        	<li><a href=""><i class="iconfont">&#xe610;</i>设置帮助</a></li>
	        </ul>
	        
	      </div>
	    </div>
	  </aside>
	  <!-- 主页面容器 -->
	  <div class="mui-inner-wrap">
	    <!-- 主页面标题 -->
	    <header class="mui-bar mui-bar-nav header_main">
	      <a href="#offCanvasSide" class="mui-icon mui-pull-left mui-icon-bars"></a>
	      <a class="mui-btn mui-btn-link mui-pull-left header_lar">　广州</a>
	      <h1 class="mui-title">预约活动</h1>
	      <a class="mui-btn mui-btn-link mui-pull-right header_lar" href="common_plan.html">常用档期</a>
	    </header>
	    <div class="mui-content mui-scroll-wrapper">
	      <div class="mui-scroll">
			<ul class="mui-table-view" style="padding-right: 5vw;">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						<i class="iconfont">&#xe603;</i>
						<strong>活动类型 :</strong> 
						<span>随机</span>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" id='showCityPicker3'>
						<i class="iconfont">&#xe601;</i>
						<strong>活动时间 :</strong>
						<span>本周末 | 下午</span>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						<i class="iconfont">&#xe604;</i>
						<strong>活动地点 :</strong>
						<span>广州师范大学... | 5km</span>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						<i class="iconfont">&#xe605;</i>
						<strong>带上好友 :</strong>
						<span>1 人</span>
					</a>
				</li>
			</ul>
	      </div>
	    </div> 
	    <div id='cityResult3' class="ui-alert"></div>
	    <button type="button" class="mui-btn mui-btn-warning" id="btn_sure">
			确认预约
		</button>
	  </div>
	</div>
</body>

<script src="js/mui.picker.min.js"></script>
<script src="js/mui.poppicker.js"></script>
<script>
//	(function($, doc) {
//		$.init();
//		$.ready(function() {
//			var cityPicker3 = new $.PopPicker({
//				layer: 3
//			});
////			cityPicker3.setData(cityData3);
//					var showCityPickerButton = doc.getElementById('showCityPicker3');
//					var cityResult3 = doc.getElementById('cityResult3');
//					
//					showCityPickerButton.addEventListener('click', function(event) {
//						cityPicker3.show(function(items) {
//							cityResult3.innerText = "你选择的城市是:" + (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
//							//返回 false 可以阻止选择框的关闭
//							//return false;
//						});
//					}, false);
//		});
//	})(mui, document);
//	
//	mui.init();
	
	
	$(function($){
		
//		var cityPicker3 = new $.PopPicker({
//				layer: 3
//			});
////			cityPicker3.setData(cityData3);
//					var showCityPickerButton = doc.getElementById('showCityPicker3');
//					var cityResult3 = doc.getElementById('cityResult3');
//					
//					showCityPickerButton.addEventListener('click', function(event) {
//						cityPicker3.show(function(items) {
//							cityResult3.innerText = "你选择的城市是:" + (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
//							//返回 false 可以阻止选择框的关闭
//							//return false;
//						});
//					}, false);
//		
		$('a').on('tap',function(){
			mui.openWindow({
				 url: $(this).attr('href')
			});
		});
	});
	
</script>



</html>
